<template>
    <div class="main-page-content page-demo-account-base">

        <div class="page-content">
            <a-row>

                <!-- left-module start -->
                <a-col :span="6">
                    <a-card class="base-info">
                        <div class="header">
                            <div class="avatar">
                                <a-avatar :size="64" icon="user" />
                            </div>
                            <div class="name">天野远子</div>
                            <div class="motto">海纳百川，有容乃大</div>
                        </div>
                        <div class="desc-list">
                            <p>
                                <a-icon class="icon" type="idcard" />
                                <span>交互专家</span>
                            </p>
                            <p>
                                <a-icon class="icon" type="apartment" />
                                <span>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</span>
                            </p>
                            <p>
                                <a-icon class="icon" type="environment" />
                                <span>浙江省杭州市</span>
                            </p>
                        </div>
                        <a-divider />
                        <div class="model tags">
                            <div class="title">标签</div>
                            <div class="list">
                                <template v-for="(item,index) in list_tags">
                                    <a-tag :closable="index>2" @close="closeTags" :data-index="index" :key="index">{{ item }}</a-tag>
                                </template>
                            </div>
                        </div>
                        <a-divider />
                        <div class="model team">
                            <div class="title">团队</div>
                            <div class="list">
                                <div class="item" v-for="(item,index) in list_team" :key="index">
                                    <a-avatar :size="20" icon="user" />
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <!-- left-module end -->


                <!-- right-module start -->
                <a-col :span="17" :offset="1">
                    <a-card class="other-info">
                        <a-tabs default-active-key="1" @change="changeTab">
                            <a-tab-pane key="1" tab="文章(5)">
                                <Article></Article>
                            </a-tab-pane>
                            <a-tab-pane key="2" tab="模块(2)" force-render>
                                <Module></Module>
                            </a-tab-pane>
                        </a-tabs>
                    </a-card>
                </a-col>
                <!-- right-module start -->

            </a-row>
        </div>

        

    </div>
</template>

<script>
import Article from "./other/article";
import Module from "./other/module";
export default {
    components:{
        Article,
        Module
    },
    data(){
        return {
            // 标签数据
            "list_tags" : [
                "最帅", "最厉害", "最牛逼", "Vue", "React", "Ant", "Router"
            ],
            // 团队数据
            "list_team"    : [
                "研发部", "市场部", "财务部", "营销部", "保安部", "行政部"
            ],
        };
    },
    methods:{
        // 关闭标签
        closeTags(e){},

        // 切换标签页
        changeTab(){}
    }
}
</script>

<style lang="less" scoped>
@import "./base.less";
</style>